<!DOCTYPE html>
<html>
<head>
    <title>dom2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!--用到了each，find遍历的方法
    find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
    siblings() 方法返回被选元素的所有同胞元素。
    trigger() 方法触发被选元素的指定事件类型。
    split() 方法用于把一个字符串分割成字符串数组。
    -->
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    var nowRow;
    $(document).ready(function(){
        $("table tr td input[value='修改']").click(function(){
            nowBtn = $(this);
            editUser($(this));
        });
        $("table tr td input[value='保存']").click(function(){
            saveUser();
        });
    });

    function editUser(btn){
        $("form input[type=reset]").trigger("click");
        nowRow = btn.parents("tr");
        var tmpArr = new Array();
        var i = 0;
        nowRow.find("td").each(function(){
            if($(this).text()!='') {
                tmpArr[i] = $(this).text();
                i++;
            }
        });
        $("form input[name='userName']").val(tmpArr[0]);
        $("form input[name='userPwd']").val(tmpArr[1]);
        if(tmpArr[2]=='男') {
            $("form input[name='userSex'][value='0']").prop("checked",true);
        } else{
            $("form input[name='userSex'][value='1']").prop("checked",true);
        }
        relax=tmpArr[3].split(',');
        for (var j=0; j<relax.length;j++) {
            if(relax[j]=='阅读') {
                $("form input[name='relax'][value='0']").prop("checked",true);
            }
            if(relax[j]=='游泳') {
                $("form input[name='relax'][value='1']").prop("checked",true);
            }
            if (relax[j]=='篮球'){
                $("form input[name='relax'][value='2']").prop("checked",true);
            }
        }
        if(tmpArr[4]=='教师'){
            $("#job").find("option[value="+'1'+"]").prop("selected",true);
        }
        if(tmpArr[4]=='电器工程师'){
            $("#job").find("option[value="+'2'+"]").prop("selected",true);
        }
        if(tmpArr[4]=='财务'){
            $("#job").find("option[value="+'3'+"]").prop("selected",true);
        }
        if(tmpArr[4]=='自由职业'){
            $("#job").find("option[value="+'4'+"]").prop("selected",true);
        }
    };
    function saveUser(){
        if('' != $("form input[name='userName']").val()&&''!= $("form input[name='userPwd']").val()){
            var tmp = new Array();
            var i = 0;
            tmp[0] = $("form input[name='userName']").val();
            tmp[1] = $("form input[name='userPwd']").val();
            if($("form input[name='userSex']:checked").val()==0) {
                tmp[2]='男';
            } else {
                tmp[2]='女';
            }
            tmp[3]='';
            $("form input[name='relax']:checked").each(function(){
                tmp[3]+=$(this).val()+',';
            });
            relax=tmp[3].split(',');
            tmp[3]='';
            for (var j=0; j<relax.length;j++) {
                if(relax[j]!=''){
                    if(relax[j]=='0') {
                        tmp[3]+='阅读';
                    }
                    if(relax[j]=='1') {
                        tmp[3]+='游泳';
                    }
                    if (relax[j]=='2'){
                        tmp[3]+='篮球';
                    }
                    if(j!=relax.length-2){
                        tmp[3]+=',';
                    }
                }
            }
            tmp[4] = $("select option:selected").text();
            nowRow.find("td").each(function(){
                $(this).text(tmp[i]);
                i++;
            });
            alert('保存成功!');
            $("form input[type=reset]").trigger("click");
        } else {
            alert('请输入数据!');
        }
    }
    function addUser(){
        if('' != $("form input[name='userName']").val()&&''!= $("form input[name='userPwd']").val()){
            var tmp = new Array();
            var i = 0;
            tmp[0] = $("form input[name='userName']").val();
            tmp[1] = $("form input[name='userPwd']").val();
            if($("form input[name='userSex']:checked").val()==0) {
                tmp[2]='男';
            } else {
                tmp[2]='女';
            }
            tmp[3]='';
            $("form input[name='relax']:checked").each(function(){
                tmp[3]+=$(this).val()+',';
            });
            relax=tmp[3].split(',');
            tmp[3]='';
            for (var j=0; j<relax.length;j++) {
                if(relax[j]!=''){
                    if(relax[j]=='0') {
                        tmp[3]+='阅读';
                    }
                    if(relax[j]=='1') {
                        tmp[3]+='游泳';
                    }
                    if (relax[j]=='2'){
                        tmp[3]+='篮球';
                    }
                    if(j!=relax.length-2){
                        tmp[3]+=',';
                    }
                }
            }
            tmp[4] = $("select option:selected").text();
            $("form input[type=reset]").trigger("click");
            $("#table").append('<tr>'+
                '<td>'+tmp[0]+'</td>'+
                '<td>'+tmp[1]+'</td>'+
                '<td>'+tmp[2]+'</td>'+
                '<td>'+tmp[3]+'</td>'+
                '<td>'+tmp[4]+'</td>'+
                '<td><input type="button" value="修改"/></td>'+
                '</tr>');
        } else {
            alert('请输入数据!');
        }
    }
</script>
<body>
<table border="1">
    <tr>
        <td>用户名</td>
        <td>密码</td>
        <td>性别</td>
        <td>爱好</td>
        <td>工作</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>123456</td>
        <td>男</td>
        <td>阅读,篮球</td>
        <td>自由职业</td>
        <td><input type="button" value="修改" onclick="editUser(this);"/></td>
    </tr>
    <tr>
        <td>李娜</td>
        <td>111111</td>
        <td>女</td>
        <td>游泳</td>
        <td>财务</td>
        <td><input type="button" value="修改" onclick="editUser(this);"/></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>111564</td>
        <td>男</td>
        <td>游泳,篮球</td>
        <td>教师</td>
        <td><input type="button" value="修改" onclick="editUser(this);"/></td>
    </tr>
</table>
<p></p>
<form action="formResult.html" name="userForm" method="get">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="userName" id="userName"  value=""/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="userPwd" id="password" value=""/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="userSex" value="0"  >男
                <input type="radio" name="userSex" value="1" >女 </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td><input type="checkbox" name="relax" value="0" >阅读
                <input type="checkbox" name="relax" value="1" >游泳
                <input type="checkbox" name="relax" value="2" >篮球</td>
        </tr>
        <tr>
            <td>工作：</td>
            <td><select name="job" id="job" >  <!-- size="5" multiple -->
                <option value="">请选择职业</option>
                <option value="1">教师</option>
                <option value="2" >电器工程师</option>
                <option value="3" >财务</option>
                <option value="4">自由职业</option>
            </select></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="reset" value="清空" />
                <input type="button" value="保存" onclick="addUser();"/></td>
        </tr>
    </table>
</form>
</body>
</html>
